<template>
    <div>
        <ul class="tags">
            <li v-for="(item,index) in dataSource" :key="index" :class="{highlight:nowId == item.id}"  
            @click="changeIndex(item.id)">
                <div class="circle">
                    <Tag  :name="item.iconstr"/>
                </div>
                {{item.descstr}}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import { Component,Prop } from 'vue-property-decorator';
    @Component
    export default class Tags extends Vue {
        @Prop(Array) dataSource: Object[] | undefined;
        nowId = 0;
        changeIndex(newId: number){
            this.nowId = newId;
            this.$emit('update:value',this.nowId);
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";
    .tags{
        flex-grow:1; 
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            width:25%;
            font-size: 14px;
            margin: 10px 0;
            .circle{
                width: 50px;
                height: 50px;
                border-radius: (50px/2);
                border:1px solid $color-border;
                padding:7px;
                background-color: $color-bgc;
                margin-bottom: 7px;
            }
        }
        li.highlight{
            .circle{
                background-color: $color-highlight;
                border:1px solid $color-bgc;
            }
        }
    }
</style>